<template>
  <div class="user">
    <!-- 头部 -->
    <van-nav-bar title="我的资料">
      <template #left>
        <van-icon @click="$router.push('home/my')" name="arrow-left" />
      </template>
    </van-nav-bar>
    <!-- 信息列表 -->
    <van-cell-group class="list">
      <!-- 头像 -->
      <van-cell
        center
        title="头像"
        is-link
        @click="$router.push('/uploadingfiles')"
      >
        <van-image
          round
          width="40px"
          :src="baseUrl + userInfo.avatar"
          height="40px"
        />
      </van-cell>
      <!-- 昵称 -->
      <div class="nameData">
        <van-cell
          center
          title="昵称"
          :value="userInfo.nickname"
          is-link
          @click="nicknames"
        />
      </div>
      <!-- 性别 -->
      <van-cell
        center
        title="性别"
        :value="sex ? sex : theSex"
        is-link
        @click="show = true"
      />
      <van-action-sheet
        v-model="show"
        :round="false"
        position="bottom"
        :style="{ height: '40%' }"
      >
        <van-picker
          title="标题"
          v-model="userInfo.gender"
          show-toolbar
          :visible-item-count="3"
          :columns="columns"
          @confirm="onConfirm"
          @cancel="onCancel"
          @change="onChange"
        />
      </van-action-sheet>
      <!-- 地区 -->
      <van-cell
        center
        title="地区"
        @click="areas"
        :value="positiones ? positiones : userInfo.area"
        confirm-button-text
        is-link
      />
      <van-popup v-model="isShow" position="bottom" :style="{ height: '40%' }">
        <van-area
          title="标题"
          :area-list="areaList"
          @confirm="onConfirmm"
          @cancel="isShow = false"
          :columns-num="2"
          :visible-item-count="3"
          v-model="userInfo.area"
          value="360000"
        />
      </van-popup>
      <!-- 昵称 简历  岗位-->
      <div class="resum">
        <van-cell center @click="resumes" title="个人简历" is-link>
          <span class="resume">{{ userInfo.intro }}</span>
        </van-cell>
      </div>
      <van-button class="aff" @click="affirm" plain square type="danger"
        >退出登录</van-button
      >
    </van-cell-group>
  </div>
</template>

<script>
// 操作token 获取当前的token
import { removeLocal, setLocal } from '@/utils/local.js'
// 导入Vuex中的数据
import { mapState, mapActions } from 'vuex'
// 导入接口
import { edit } from '@/api/my.js'
// 导入地区的包
import cityList from '@/utils/cityData.js'
import { Toast } from 'vant'
export default {
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  // 从页面加载就执行
  created () {
    // 使用对象展开运算符
    this.setUserInfo()
    this.arr()
    // 获取新的数据
    setLocal(this.userInfo, 'userInfo')
  },
  data () {
    return {
      // 基地址userInfo
      baseUrl: process.env.VUE_APP_URL,
      // 控制显示与隐藏
      show: false,
      area: false,
      isShow: false,
      columns: ['未知', '男孩子', '女孩子'],
      // 城市
      areaList: {
        province_list: cityList.province_list,
        city_list: cityList.city_list
      },
      position: [],
      value: null,
      positiones: '',
      //
      sex: ''
    }
  },
  methods: {
    // 对象展开运算符
    ...mapActions(['setUserInfo']),
    onCancel () {
      // 隐藏按钮
      this.show = false
      console.log('取消按钮')
    },
    // 点击 选中性别
    onChange (picker, value, index) {
      // console.log(picker, value, index)
      if (value === '未知') {
        this.userInfo.gender = '0'
      } else if (value === '男孩子') {
        this.userInfo.gender = '1'
      } else {
        this.userInfo.gender = '2'
      }
    },
    // 点击确认按钮
    async onConfirm (value, index) {
      // console.log(`当前值：${value}, 当前索引：${index}`)
      // 调用接口
      try {
        // 将服务器返回的数据赋值
        var res = await edit({ gender: index })
        switch (res.data.gender) {
          case 0:
            this.sex = '未知'
            break
          case 1:
            this.sex = '男孩子'
            break
          case 2:
            this.sex = '女孩子'
            break
        }
        this.show = false
        // console.log(res.data.gender)
        window.location.reload()
      } catch {
        Toast.fail('错误信息')
      }
      window.location.reload()
      window.location.reload()
      window.location.reload()
    },
    // 触发地区的组件
    areas () {
      this.isShow = true
    },
    // 点击地区的的按钮(并且修改)
    async onConfirmm (value) {
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 20000
      })

      //  console.log(value[0].name)
      // const main = value[0].name
      // await edit({ area: main })
      // this.$toast.success('用户信息更新成功')
      // this.isShow = false
      console.log(value[0].name)
      const main = value[0].name
      try {
        // 调用接口
        await edit({ area: main })
        // 完成则隐藏 模态框
        this.isShow = false
        // 提示用户修改成功
        Toast.success('修改成功')
      } catch {
        Toast.fail('修改失败')
      }
      // 获取新的数据
      setLocal(this.userInfo, 'userInfo')
    },
    // 昵称
    nicknames () {
      // 跳转页面
      this.$router.push('/panel?id=nickname')
    },
    // 修改简历
    resumes () {
      // 跳转页面
      this.$router.push('/panel?id=intro')
    },
    // 退出登录
    affirm () {
      this.$dialog
        .confirm({
          title: '亲, 你确认退出?',
          message: '下次需要重新登录'
        })
        .then(() => {
          // 删除token
          removeLocal()
          // 跳转到登录页面
          this.$router.push('/login')
        })
        .catch(() => {
          // 取消
        })
    },
    arr () {
      if (!this.sex) {
        switch (this.userInfo.gender) {
          case 0:
            this.sex = '未知'
            break
          case 1:
            this.sex = '男孩子'
            break
          case 2:
            this.sex = '女孩子'
            break
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.user {
  /deep/.van-nav-bar__title {
    font-size: 16px;
    color: #fff;
  }
  /deep/.van-icon-arrow-left::before {
    color: #fff;
    font-size: 20px;
  }
  /deep/.van-nav-bar {
    background-color: #ca0131;
  }
  .icon-xiangzuojiantou:before {
    font-size: 20px;
    margin-left: -2px;
    color: #000;
  }
  .van-icon-arrow::before {
    margin-left: 10px;
  }
  .box {
    padding-top: 40px;
  }
  .list {
    padding: 15px;
  }
  .aff {
    width: 350px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  .resume {
    max-width: 90px;
    word-wrap: break-word;
    word-break: normal;
    display: inline-block;
  }
  .nameData {
    /deep/.van-cell__value {
      width: 100px;
      position: relative;
      overflow: hidden;
      color: #969799;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  }
  .resum {
    /deep/.van-cell__value {
      width: 100px;
      position: relative;
      overflow: hidden;
      color: #969799;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  }
  /deep/.van-cell {
    padding: 12px;
  }
  /deep/.iconbtn_nav_back:before {
    font-size: 40px;
  }
  /deep/.van-picker__toolbar {
    display: fixed;
    bottom: 150px;
  }
  /deep/.van-picker__columns {
    // height: 220px !important;
    display: flex;
    z-index: 1;
  }
}
</style>
